<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>中科碳和</title>
    <meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
    <meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">


    <link rel="stylesheet" th:href="@{/cweb/css/customer.css}"/>
    <link rel="stylesheet" th:href="@{/cweb/css/calculator_index.css}"/>
    <link rel="stylesheet" media="screen" th:href="@{/cweb/css/lizi.css}">

</head>
<body>
<div class="header">
    <div th:replace="home/cfragments/navbar :: cnavbar"></div>
</div>

<div class="cal-main">
    <div id="particles-js">
        <canvas class="particles-js-canvas-el"></canvas>
    </div>
    <!--轮播图-->
    <div class="banner">
        <div class="shutter">
            <div class="shutter-img">
                <a th:each="rotationImg : ${rotationImgs}" href="javascript:void(0);" data-shutter-title="">
                    <img th:src="${rotationImg.rotationImage}" alt="#">
                </a>
            </div>
            <ul class="shutter-btn" style="margin-bottom: 0">
                <li class="prev"></li>
                <li class="next"></li>
            </ul>
        </div>
    </div>

    <div class="cal-row">
        <div class="cal-card">
            <div class="card-title">化工</div>
            <div class="card-btn-div">
                <button type="button" onclick="chemicalindustry();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">发电设施</div>
            <div class="card-btn-div">
                <button type="button" onclick="fdss();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">电网</div>
            <div class="card-btn-div">
                <button type="button" onclick="dw();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">镁冶炼</div>
            <div class="card-btn-div">
                <button type="button" onclick="myl()" class="btn btn-primary">去体验</button>
            </div>
        </div>
    </div>

    <div class="cal-row">
        <div class="cal-card">
            <div class="card-title">铝冶炼</div>
            <div class="card-btn-div">
                <button type="button" onclick="lyl();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">钢铁生产</div>
            <div class="card-btn-div">
                <button type="button" onclick="gtqy();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">民用航空</div>
            <div class="card-btn-div">
                <button type="button" onclick="myhk();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">平板玻璃生产</div>
            <div class="card-btn-div">
                <button type="button" onclick="pbbl();" class="btn btn-primary">去体验</button>
            </div>
        </div>
    </div>

    <div class="cal-row">
        <div class="cal-card">
            <div class="card-title">水泥生产</div>
            <div class="card-btn-div">
                <button type="button" onclick="sqsc();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">陶瓷生产</div>
            <div class="card-btn-div">
                <button type="button" onclick="tcqy();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">煤炭生产</div>
            <div class="card-btn-div">
                <button type="button" onclick="coal();" class="btn btn-primary">去体验</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">纺织服装</div>
            <div class="card-btn-div">
                <button type="button" onclick="fzqy()" class="btn btn-primary">去体验</button>
            </div>
        </div>
    </div>

    <div class="cal-row">
        <div class="cal-card">
            <div class="card-title">石油天然气生产</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">造纸和纸制品生产</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">石油化工</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">独立焦化</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
    </div>

    <div class="cal-row">
        <div class="cal-card">
            <div class="card-title">氟化工</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">矿山</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">建筑</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">电子设备制造</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
    </div>

    <div class="cal-row">
        <div class="cal-card">
            <div class="card-title">机械设备制造</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">陆上交通运输</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">食品烟草及酒饮料和精制茶叶</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
        <div class="cal-card">
            <div class="card-title">其他有色金属冶炼和延压加工</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
    </div>

    <div class="cal-row">
        <div class="cal-card">
            <div class="card-title">工业其他行业</div>
            <div class="card-btn-div">
                <button type="button" class="btn btn-primary">建设中</button>
            </div>
        </div>
    </div>
</div>


<!--后台置顶5个带封面的文章-->
<div class="main-container">
    <div class="content">
        <div class="left">
            <a th:if="${topArticles.size() > 0}" th:href="@{${('/blog/article/' + topArticles.get(0).id)}}">
                <div class="top">
                    <img th:src="@{${topArticles.get(0).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(0).title}"></p>
                </div>
            </a>
            <a th:if="${topArticles.size() > 1}" th:href="@{${('/blog/article/' + topArticles.get(1).id)}}">
                <div class="bottom">
                    <img th:src="@{${topArticles.get(1).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(1).title}"></p>
                </div>
            </a>
        </div>
        <div class="center">
            <a th:if="${topArticles.size() > 2}" th:href="@{${('/blog/article/' + topArticles.get(2).id)}}">
                <div class="top">
                    <img th:src="@{${topArticles.get(2).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(2).title}"></p>
                </div>
            </a>
            <a th:if="${topArticles.size() > 3}" th:href="@{${('/blog/article/' + topArticles.get(3).id)}}">
                <div class="bottom">
                    <img th:src="@{${topArticles.get(3).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(3).title}"></p>
                </div>
            </a>
        </div>
        <div class="right">
            <a th:if="${topArticles.size() > 4}" th:href="@{${('/blog/article/' + topArticles.get(4).id)}}">
                <div class="top">
                    <img th:src="@{${topArticles.get(4).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(4).title}"></p>
                </div>
            </a>
            <a th:if="${topArticles.size() > 5}" th:href="@{${('/blog/article/' + topArticles.get(5).id)}}">
                <div class="bottom">
                    <img th:src="@{${topArticles.get(5).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(5).title}"></p>
                </div>
            </a>
        </div>
    </div>
</div>

<div class="footer">
    <div th:replace="home/cfragments/footer :: cfooter"></div>
</div>
<script th:src="@{/cweb/js/velocity.js}"></script>
<script th:src="@{/cweb/js/shutter.js}"></script>
<script th:src="@{/cweb/js/lizi.js}"></script>
<script>
    $(function () {

        $('.shutter').shutter({
            /*shutterW: 1000, // 容器宽度
            shutterH: 358, // 容器高度*/
            isAutoPlay: true, // 是否自动播放
            playInterval: 3000, // 自动播放时间
            curDisplay: 0, // 当前显示页
            fullPage: false // 是否全屏展示
        });


        $('.card-button').find('.btn').each(function () {
            $(this).click(function () {
                cardContent($(this).attr('id'), $(this));
            });

        });


        afterCardChange();
    });

    function cardContent(type, obj) {
        $('.card-button').find('button').removeClass('active');
        obj.addClass('active');

        type = type || 'build';
        $('#card-content').load('/blog/card/' + type + ' #container', function () {
            afterCardChange();
        });
    }

    function eg() {
        window.location.href = '/blog/eg';
    }

    function getPowerGrid() {
        window.location.href = '/blog/powergrid';
    }

    function afterCardChange() {

        $('.one').mouseover(function () {
            enterCard($(this));
        });

        $('.one').mouseout(function () {
            outCard($(this));
        });

        $('.two').mouseover(function () {
            enterCard($(this));
        });

        $('.two').mouseout(function () {
            outCard($(this));
        });

        $('.three').mouseover(function () {
            enterCard($(this));
        });

        $('.three').mouseout(function () {
            outCard($(this));
        });
    }

    function enterCard(obj) {
        //边框变蓝色
        obj.find('div').addClass('card-main-mouseenter');
        obj.find('button').addClass('card-button-mouseenter')
    }

    function outCard(obj) {
        obj.find('div').removeClass('card-main-mouseenter')
        obj.find('button').removeClass('card-button-mouseenter')
    }

</script>
</body>
</html>
